<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>在线资源</title>
<style>
/*
Copyright (c) 2010, Yahoo! Inc. All rights reserved.
Code licensed under the BSD License:
http://developer.yahoo.com/yui/license.html
version: 3.3.0
build: 3167
*/
html{color:#000;background:#FFF;}
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0;}
table{border-collapse:collapse;border-spacing:0;}
fieldset,img{border:0;}
address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal;}
li{list-style:none;}
caption,th{text-align:left;}
h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}
q:before,q:after{content:'';}
abbr,acronym{border:0;font-variant:normal;}
sup{vertical-align:text-top;}
sub{vertical-align:text-bottom;}
input,textarea,select{font-family:inherit;font-size:inherit;font-weight:inherit;}
input,textarea,select{*font-size:100%;}
legend{color:#000;}

h1,h2,h3,h4,h5,h6{
	font-family: "微软雅黑",Arial, Helvetica, sans-serif; 
	font-weight:bold;
}
#content{
	overflow:hidden;
	background:#F1F59C;
	width:100%;
}
h3{ 
	font-size:1.5em; 
	padding:10px 20px 5px 20px;
	margin:10px; 
	color:#A64529;
	float:right;
	text-align:center;
	/* 缩小浏览器宽度到文字折行，可以发现效果依旧起作用，说明效果是重绘级别的，高效而且安全 */
	-webkit-box-reflect: below 0px -webkit-gradient(linear, 0% 0%, 0% 100%, from(transparent), to(rgba(255, 255, 255, 0.457031))) 0 0 0 0 stretch stretch;	/* 倒影 */
	background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(255, 255, 255, 0.578125)), to(rgba(241, 245, 156, 0.578125)));							/* 背景渐变 */
	border-radius: 10px;		/* 圆角 */
}
h4{ 
	font-size:1.3em; 
	padding:8px 10px; 
	margin-top:5px; 
	color:#D18038;
}
h5{ 
	font-size:1.1em; 
	padding:5px 10px; 
	color:#D18038;
}
a{
	color:#362111; 
	text-decoration:none;
	padding:2px 3px;
	border-radius: 5px;		/* 圆角，当文字折行的时候将会发现圆角的局限性，不能指望浏览器做的更多 */
}
a:hover{
	color:#fff; 
	background:#362111; 
	text-decoration:none;
}
ul{ 
	padding:10px 10px 10px 30px; 
	background:#BDB35E;
	/* 直接使用 border-right-radius: 15px; 结果发现无效 */
	border-bottom-right-radius: 15px;	/* 圆角 */
	border-top-right-radius: 15px;		/* 圆角 */
}
li{
	list-style:circle;
}
h4,h5,ul{
	float:left;clear:left;
}
</style>
</head>

<body>
<div id="content">
	<h3>在线资源</h3>
    <h5>官方：</h5>
	<ul>
    	<li><a target="_blank" href="http://www.w3.org/">W3C 组织官方站点</a></li>
        <li><a target="_blank" href="http://www.w3.org/html/logo/">HTML5 的 logo</a></li>
    	<li><a target="_blank" href="http://www.w3.org/TR/html5/">HTML5 的官方文档</a></li>
        <li><a target="_blank" href="http://www.w3.org/TR/html5-diff/">HTML5 与 HTML4 的区别</a></li>
        <li><a target="_blank" href="http://www.w3.org/TR/html-design-principles/">HTML5 的设计原则</a></li>
    </ul>
    <h5>手机客户端：</h5>
	<ul>
    	<li><a target="_blank" href="http://www.tat.se/videos/">http://www.tat.se/videos/</a></li>
        <li><a target="_blank" href="http://www.youtube.com/watch?v=g7_mOdi3O5E&feature=player_embedded#!">http://www.youtube.com/watch?v=g7_mOdi3O5E&amp;feature=player_embedded#!</a></li>
    </ul>
    <h5>纯CSS实现：</h5>
	<ul>
    	<li><a target="_blank" href="http://www.romancortes.com/blog/css-3d-meninas/">http://www.romancortes.com/blog/css-3d-meninas/</a></li>
        <li><a target="_blank" href="http://www.romancortes.com/ficheros/page-flip.html">http://www.romancortes.com/ficheros/page-flip.html</a></li>
    </ul>
    <h5>html5示例：</h5>
	<ul>
    	<li><a target="_blank" href="http://html5demos.com/">http://html5demos.com/</a></li>
        <li><a target="_blank" href="http://html5gallery.com/">http://html5gallery.com/</a></li>
        <li><a target="_blank" href="http://www.w3.org/2010/05/video/mediaevents.html">http://www.w3.org/2010/05/video/mediaevents.html</a></li>
    </ul>
    <h5>html5视频与音频：</h5>
	<ul>
    	<li><a target="_blank" href="http://developer.apple.com/library/safari/#documentation/AudioVideo/Conceptual/Using_HTML5_Audio_Video/Introduction/Introduction.html">http://developer.apple.com/library/safari/#documentation/AudioVideo/Conceptual/Using_HTML5_Audio_Video/Introduction/Introduction.html</a></li>
    </ul>
    <h5>cancas：</h5>
	<ul>
    	<li><a target="_blank" href="http://news.csdn.net/a/20100626/218939.html">http://news.csdn.net/a/20100626/218939.html</a></li>
    </ul>
    <h5>webgl 需要chrome开发版本 9.0以上：</h5>
	<ul>
    	<li><a target="_blank" href="http://www.d3dweb.com/Documents/201009/03-2130481141.html">http://www.d3dweb.com/Documents/201009/03-2130481141.html</a></li>
        <li><a target="_blank" href="https://developer.mozilla.org/en/WebGL">https://developer.mozilla.org/en/WebGL</a></li>
        <li><a target="_blank" href="https://sites.google.com/a/chromium.org/dev/developers/demos-gpu-acceleration-and-webgl">https://sites.google.com/a/chromium.org/dev/developers/demos-gpu-acceleration-and-webgl</a></li>
        <li><a target="_blank" href="http://www.ambiera.com/copperlicht/demos.html">http://www.ambiera.com/copperlicht/demos.html</a></li>
        <li><a target="_blank" href="http://www.khronos.org/webgl/wiki/Main_Page">http://www.khronos.org/webgl/wiki/Main_Page</a></li>
    </ul>
    <h5>综合资源：</h5>
	<ul>
    	<li><a target="_blank" href="http://www.soberma.com/html5-css3">http://www.soberma.com/html5-css3</a></li>
        <li><a target="_blank" href="http://www.w3school.com.cn/html5/html5_reference.asp">http://www.w3school.com.cn/html5/html5_reference.asp</a></li>
        <li><a target="_blank" href="http://www.w3schools.com/css3/default.asp">http://www.w3schools.com/css3/default.asp</a></li>
        <li><a target="_blank" href="http://html5cn.net/demo/132/demo.html#slide1">http://html5cn.net/demo/132/demo.html#slide1</a></li>
    </ul>
    <h5>JS案例：</h5>
	<ul>
    	<li><a target="_blank" href="http://demo.artetics.com/index.php?option=com_content&view=article&id=111&Itemid=143">http://demo.artetics.com/index.php?option=com_content&amp;view=article&amp;id=111&amp;Itemid=143</a></li>
    </ul>
</div>
</body>
</html>
